<template>
    <table class="table table-striped">
        <table-header :tableHead="tableHead"></table-header>
        <table-body :tableData="tableData" :edit="edit" :trash="trash" :info="info"></table-body>
        <tfoot v-if="tableHead.length > 0">
        <tr>
            <td :colspan="tableHead.length + 2" class="clearfix">
                <div class="pull-left btn-group m-t-20" v-show="st.deleted">
                    <button class="btn btn-default" @click="selectAll">全选</button>
                    <button class="btn btn-default" @click="unSelectAll">取消</button>
                    <button class="btn btn-default" @click="reverseSelect">反选</button>
                    <button class="btn btn-warning" @click="deleteFunc">删除</button>
                </div>
                <button class="btn btn-success m-t-20 m-l-10" v-show="insert !== undefined" @click="addFunc">添加</button>
                <pagination :totalPage="totalPage" :currentPage="currentPage" :toPagination="redirectPagination"
                            class="pull-right"></pagination>
            </td>
        </tr>
        </tfoot>
    </table>
</template>

<style scoped="">
    .m-t-20 {
        margin-top: 20px;
    }

    .m-l-10 {
        margin-left: 10px;
    }
</style>

<script>
    /* eslint-disable no-undef */
    import TableHeader from './TableHeader.vue';
    import TableBody from './TableBody.vue';
    import Pagination from '../widget/Pagination.vue';

    export default {
        name: 'DataTable',
        data () {
            return {
                el: null,
                st: {
                    deleted: false,
                    add: false
                }
            };
        },
        components: {
            TableHeader,
            TableBody,
            Pagination
        },
        props: {
            tableHead: {type: Array},
            tableData: {type: Array},
            totalPage: {type: Number},
            currentPage: {type: Number},
            redirectPagination: {type: Function},
            deleteData: {type: Function},
            edit: {type: Function},
            trash: {type: Function},
            info: {type: Function},
            insert: {type: Function}
        },
        methods: {
            selectAll () {
                $('input[data-type="checkbox"]', this.el).prop('checked', true);
            },
            unSelectAll () {
                $('input[data-type="checkbox"]', this.el).prop('checked', false);
            },
            reverseSelect () {
                $('input[data-type="checkbox"]', this.el).each(function () {
                    if ($(this).prop('checked')) {
                        $(this).prop('checked', false);
                    } else {
                        $(this).prop('checked', true);
                    }
                });
            },
            deleteFunc () {
                if (!(this.deleteData instanceof Function)) {
                    return 0;
                }
                let ids = [];
                $('input[type="checkbox"]', this.el).each(function () {
                    if ($(this).prop('checked')) {
                        ids.push($(this).val());
                    }
                });
                if (ids.length <= 0) {
                    return 0;
                }
                this.deleteData(ids);
            },
            addFunc () {
                if (this.insert instanceof Function) {
                    this.insert();
                }
            },
            click (p) {
                if (this.redirectPagination instanceof Function) {
                    this.redirectPagination(p);
                }
            }
        },
        watch: {
            deleteData (n) {
                if (n instanceof Function) {
                    this.st.deleted = true;
                }
            },
            inset (n) {
                if (n instanceof Function) {
                    this.st.add = true;
                }
            }
        },
        mounted () {
            this.el = $(this.$el);
            if (this.deleteData instanceof Function) {
                this.st.deleted = true;
            }
            if (this.inset instanceof Function) {
                this.st.add = true;
            }
        }
    };
</script>
